<div class="card" id="rule">
    <div class="card-header">
        添加回复规则
    </div>
    <div class="card-block" style="background: rgb(245, 245, 245)">
        <div class="form-group row">
            <label class="col-12 col-sm-3 col-form-label text-sm-right">规则名称</label>
            <div class="col-12 col-sm-8 col-lg-6">
                <input type="text" v-model="rule.name" class="form-control form-control-sm">
            </div>
        </div>
        <div class="form-group row" v-for="(v,k) in rule.keywords">
            <label class="col-12 col-sm-3 col-form-label text-sm-right">关键词</label>
            <div class="col-12 col-sm-8 col-lg-6">
                <div class="input-group mb-3">
                    <input type="text" v-model="v.key" class="form-control">
                    <div class="input-group-append">
                        <span class="mdi mdi-close form-control-feedback mt-2 ml-2" style="font-size: 30px;color: red" @click="del(k)"></span>
                    </div>
                </div>
            </div>
        </div>
        <textarea name="rule" hidden>@{{ rule }}</textarea>
    </div>
    <div class="card-footer text-muted">
        <button class="btn btn-secondary" type="button" @click="add()">添加关键词</button>
    </div>
</div>

<script>
    require(['vue'],function(vue){
        new vue({
            el:'#rule',
            data:{
                rule:{
                    id:{{$rule['id']?: 0}},
                    name:"{{$rule['name']?: ''}}",
                    keywords:{!! $rule->guanjian !!}
                }
            },
            methods:{
                add(){
                    // alert(456);
                    this.rule.keywords.push({key:''})
                },
                del(k){
                    this.rule.keywords.splice(k,1)
                }
            }
        })
    })
</script>